<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!--    <demo01></demo01>-->
<!--    <h1>测试首页展示的组件是App.vue</h1>-->
<!--    <hr>-->
<!--    <h3>导航条案例</h3>-->
<!--    <a href="#/father">father</a> &nbsp-->
<!--    <a href="#/son">son</a>-->
<!--    router-link组件可以代替标签   作用：可以省略#-->
<!--    <router-link to="/father">father</router-link> &nbsp-->
<!--    <router-link to="/son">son</router-link>-->

    <router-link to="/home">home</router-link> &nbsp
    <router-link to="/movie">movie</router-link> &nbsp
    <router-link to="/news">news</router-link> &nbsp
    <router-link to="/about">about</router-link> &nbsp
<!--    类似占位符  可以将路由的组件指定区域进行展示-->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import demo01 from "@/components/Demo01";

export default {
  name: 'App',
  components: {
    HelloWorld,demo01
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
